<template>
	<div class="mtloadmore_page" :style="{'-webkit-overflow-scrolling': scrollMode}">
		<mt-loadmore :bottom-method="loadBottom"
					 :top-method="loadTop"
                     :bottom-all-loaded="allUseLoad" 
                     :bottomDropText="bottomDropText"
                     :topDropText="topDropText"
                     :autoFill="autoFill"
                     ref="loadmore">
          <ul>
          	<li v-for="(item,index) in listNum">第{{index+1}}个li</li>
          </ul>
        </mt-loadmore>
	</div>

</template>

<script>
	import { Loadmore  } from 'mint-ui';
	export default {
		components:{Loadmore},
		data(){
			return{
				listNum: 20,
		        pageNo: 1,
		        allUseLoad: false,
		        topDropText:'刷新中...',
		        bottomDropText:'玩命加载中...',
		        loading:false,
		        scrollMode:'touch',
		        totalCount: '15',
		        autoFill:false,
			}
		},
		methods:{
			//上拉加载的方法
			loadBottom(){
				this.pageNo+= 1;
				if(this.pageNo==this.totalCount){
					this.allUseLoad = true
				}
				this.listNum+=5;
				this.$refs.loadmore.onBottomLoaded()
			},
			//下拉刷新
			loadTop(){
				this.listNum = 20;
				this.$refs.loadmore.onTopLoaded();
			}
			
		},
		mounted(){

		}
	}

</script>

<style scoped>
	.mtloadmore_page{height: 100%;overflow: scroll;}
	li{height: 40px;line-height: 40px;text-align: center;}
</style>